<template>
  <div>
    <div style="color: #101010; font-weight: 600">抽奖管理</div>
    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
      <el-button type="primary" @click="addExchangeGood()"
        >编辑转盘图</el-button
      >
      <el-button type="primary" @click="luckImgGoods()">编辑规则图</el-button>
      <el-button type="primary" @click="addExchangeGoods()">创建奖池</el-button>
    </div>
    <div>
      <el-table :data="addGoodsList" border style="width: 100%">
        <el-table-column
          label="ID"
          type="index"
          :index="indexMethod"
          align="center"
        />
        <el-table-column
          prop="id"
          label="奖池ID"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="奖池名称"
          width="170"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="prizeTotal"
          label="奖品数量"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="onlineTime"
          label="抽奖开始时间"
          width="190"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="offlineTime"
          label="抽奖结束时间"
          width="190"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="groupId"
          label="奖池对应"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.groupId == 1">入会两家店铺</span>
            <span v-else-if="scope.row.groupId == 2">入会三家店铺</span>
            <span v-else-if="scope.row.groupId == 3">入会四家店铺</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="editAddGoods(scope.row)"
              >奖项配置</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="editAddgood(scope.row)"
            >
              编辑</el-button
            >
            <el-button @click="deleteGoods(scope.row)" type="danger" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 30px">
        <el-pagination
          mini
          layout="total, prev, pager, next, jumper"
          :current-page.sync="iDisplayStart"
          :page-size="iDisplayLength"
          :total="totalPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <luckDrawAdd
      v-if="addOrEdit == 1"
      :addOrEdit="addOrEdit"
      @getAddGoodsList="getAddGoodsList"
    >
    </luckDrawAdd>
    <luckDrawAddT
      v-if="addOrEdit == 2"
      :addOrEdit="addOrEdit"
      :editGoodsCont2="editGoodsCont2"
      @getAddGoodsList="getAddGoodsList"
    ></luckDrawAddT>
    <luckDrawPrize
      v-if="addOrEdit == 3"
      :addOrEdit="addOrEdit"
      :editGoodsCont2="editGoodsCont2"
      @getAddGoodsList="getAddGoodsList"
    >
    </luckDrawPrize>
    <luckDrawEdit
      v-if="addOrEdit == 4"
      :addOrEdit="addOrEdit"
      :editAddgoodss="editAddgoodss"
      @getAddGoodsList="getAddGoodsList"
    >
    </luckDrawEdit>
  </div>
</template>

<script>
import luckDrawAdd from "./luckDrawAdd.vue";
import luckDrawAddT from "./luckDrawAddT.vue";
import luckDrawPrize from "./luckDrawPrize.vue";
import luckDrawEdit from "./luckDrawEdit.vue";
import requestAxios from "../../../http.js";
export default {
  name: "luckDrawPage",
  data() {
    return {
      addOrEdit: false, // 增加还是编辑
      addGoodsList: [],
      iDisplayLength: 10,
      iDisplayStart: 1,
      totalPage: 0,
    };
  },
  components: {
    luckDrawAdd,
    luckDrawAddT,
    luckDrawPrize,
    luckDrawEdit,
  },
  mounted() {
    this.getAddGoodsList();
  },
  methods: {
    indexMethod(index) {
      return (this.iDisplayStart - 1) * this.iDisplayLength + index + 1;
    },
    // 奖项配置
    editAddGoods(item) {
      console.log(item, "11111");
      let title = item.title;
      let id = item.id;
      console.log(id, title, "223444");
      this.$router.push({
        path: "/config/luckPrizePage",
        query: { "id": id, "title": title },
      });
    },
    // 编辑奖池
    editAddgood(item) {
      this.editAddgoodss = JSON.parse(JSON.stringify(item));
      this.addOrEdit = 4;
    },
    //创建奖池
    addExchangeGoods() {
      this.addOrEdit = 1;
    },
    // 奖池对应设置
    addExchangeGood() {
      let that = this;
      let obj = null;
      obj = {
        id: 1,
      };
      requestAxios
        .fetchGet("/api/v2.2/interactionDefination/get", obj, {
          headers: { token: that.token },
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("抽奖图查询", data.data);
            this.addOrEdit = 2;
            this.editGoodsCont2 = data.data.data;
            console.log(this.editGoodsCont2, "111111234");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 规则图片配置
    luckImgGoods() {
      let that = this;
      let obj = null;
      obj = {
        id: 1,
      };
      requestAxios
        .fetchGet("/api/v2.2/interactionDefination/get", obj, {
          headers: { token: that.token },
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("抽奖图查询", data.data);
            this.addOrEdit = 3;
            this.editGoodsCont2 = data.data.data;
            console.log(this.editGoodsCont2, "111111234");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取奖池列表信息
    getAddGoodsList() {
      let obj = null;
      obj = {
        iDisplayStart: this.iDisplayStart,
        iDisplayLength: this.iDisplayLength,
      };
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/prize/virtualGroupList",
          obj,
          {
            headers: {},
          }
        )
        .then((data) => {
          console.log(data, "____)))))))))))))))))))))))))0");
          if (data.status == 200 && data.data.success) {
            console.log("获取奖池列表信息", data.data);
            this.addGoodsList = data.data.data.aaData;
            console.log(this.addGoodsList, "获取奖池列表数据");
            this.totalPage = data.data.data.iTotalDisplayRecords;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变当前页数
    handleCurrentChange(val) {
      let that = this;
      that.iDisplayStart = val;
      console.log(`当前页: ${that.iDisplayStart}`);
      that.getAddGoodsList();
    },
    // 删除
    deleteGoods(item) {
      console.log(item);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteConfirm(item.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteConfirm(id) {
      requestAxios
        .fetchGet(
          "/api/v2.1/exchange/store/management/prize/virtualGroup?id=" + id,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("删除奖品", data.data);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            let totalPage = Math.ceil(
              (this.totalPage - 1) / this.iDisplayLength
            );
            let currengpage =
              this.iDisplayStart > totalPage ? totalPage : this.iDisplayStart;
            this.iDisplayStart = currengpage < 1 ? 1 : currengpage;
            console.log(this.iDisplayStart);
            this.getAddGoodsList();
          } else {
            console.log("删除奖品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>  